<template>
	<view  :class="{ 'display': isblock}">
		<view class="">
			<!-- 店铺背景图 -->
			<view class="top-img ">
				<image class="image" :src="background" mode="widthFix" style="width:750rpx;" :lazy-load="true" im></image>
			</view>
			<view class="white-img">
				<!-- 弧度白色背景图 -->
				<view class="">
					<image src="../../static/business/D2.png" mode="scaleToFill" style="width:750rpx;height: 134rpx;;">
					</image>
				</view>
				<!-- 长白色背景图 -->
				<view class=" " style="margin-top: -22rpx;">
					<image src="../../static/business/D1.png" mode="scaleToFill" style="width:750rpx;height: 210rpx;">
					</image>
				</view>
				<view class="" style="margin-top: -420rpx;">
					<!-- 店铺信息 -->
					<view class="tc" >
						<view class="bY">
							<!-- 头像 -->
							<view class="tc">
								<image class="circle" :src="shopLogo" mode="scaleToFill"
									style="width:150rpx;height: 150rpx;">
								</image>
							</view>
							<view class="mt5">
								<view class="tc shopName">
									{{shopName}}
								</view>
								<view class="mt10">
									<view class="">
										<text class="haoPing mr5">
											<text class="mr5">好评率</text>{{favorableRate}}%</text>
										<text>│</text>
										<text class="order ml5">
											<text class="mr5">订单数</text>{{salesVolume}}
										</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 服务承诺和服务保障 -->
					<view class=" bcX " style="width: 60%;margin:30rpx auto;">
						<view class="cX">
							<view class="mr10">
								<image src="../../static/business/T2.png" mode="scaleToFill"
									style="width:56rpx;height: 56rpx;">
							</view>
							<view class="com-tit mt5">
								服务承诺
							</view>
						</view>
						<view class="cX">
							<view class="mr10">
								<image src="../../static/business/T1.png" mode="scaleToFill"
									style="width:56rpx;height: 56rpx;">
							</view>
							<view class="com-tit mt5">
								服务保障
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mt100">
			<!-- 猜你喜欢 -->
			<view class="mt40">
				<view class="tc">
					<image src="../../static/business/Z1.png" mode="widthFix" style="width: 294rpx;">
					</image>
					<!-- <image src="https://oss.microzuji.com/web/index/Z2.png" mode="widthFix" style="width: 294rpx;">
					</image> -->
				</view>
				<!-- 猜你喜欢列表 -->
				<view class="pt20" style="margin-top: -20rpx;">
					<view class="plr20">
						<view class="businessGoodsList-box  ptb10 ">
							<view class="mt10  businessGoodsList-Item" @click="skpGoodPage(item)"
								v-for="(item, index) in businessGoodsList" :key="index">
								<view class="ptb20 tc businessGoodsList-Img">
									<image :src="item.image" :lazy-load="true" style="width: 200rpx;height: 200rpx;">
									</image>
								</view>
								<view class="businessGoodsList-tit ptb20 ">
									<view class="bX pl10">
										<image src="https://oss.microzuji.com/web/index/T16.png" mode="scaleToFill"
											style="height: 34rpx;width: 66rpx;">
										</image>
										<view class="fx1 businessGoods-tit ml10" style="margin-top: -5rpx;">
											{{item.name}}
										</view>
									</view>
									<view class="cY pl20" style="margin-top: -20rpx;">
										<view class="mt30 businessGoods-price ">
											<text class="m">¥</text>
											<text class="l" style="font-weight: 800;">
												{{ getPartMoney(item.price && item.price.toString(), true) }}
											</text>
											<text class="d">.</text>
											<text class="r">
												{{ getPartMoney(item.price && item.price.toString(), false) }}
											</text>
											<text class="r">/天</text>
										</view>
										<view class="businessGoods-tips ml10">非监管机 顺丰快递</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="home-bottom" v-if="pageNum * pageSize - total >= 10">
				<text style="text-align: center">没有更多啦，快去挑选商品吧～</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		businessInformation,
		businessProducts,
		indexComplexInfo,
		indexMayLikeProductPage,
	} from '../../api/index.js'
	export default {
		data() {
			return {
				isblock:'none',
				productName: '', //产品名称
				shopId: '', //店铺id
				shopName: '', //店铺名称
				shopLogo: '', //店铺头像
				favorableRate: '', //好评率
				salesVolume: '', //销售额
				background: '', //店铺背景图
				businessGoodsList: [],
				pageNum: 1, //页数
				pageSize: 10, //一页多少条
				total: 1, //标签商品共有多少条
			}
		},
		onLoad(e) {
			this.isblock='block'
			this.productName = e.productName
			// console.log(this.productName,"this.productName")
			this.shopId = e.shopId
			
				this.businessInformation()
			
			// console.log(e.background,"background")
			// this.shopLogo = e.shopLogo
			// this.shopName = e.shopName
			// this.favorableRate=e.favorableRate
			// this.salesVolume=e.salesVolume
			// this.background=e.background
		},
		onReachBottom() {
			this.onScrollToLower()
		},
		methods: {
			//跳转商品页
			skpGoodPage(item) {
				this.$onTo(
					`/pages/product/product?productId=${
							item.itemId}`
				)
			},
			// 商家信息
			businessInformation() {
				businessInformation({
					method: 'GET',
					data: {
						shopId: this.shopId
					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.shopName = res.data.shop.name
						this.shopLogo = res.data.shop.logo
						this.favorableRate = res.data.shop.favorableRate
						this.salesVolume = res.data.shop.salesVolume
						this.background = res.data.shop.background
						this.businessProducts()
					}
				})
			},
			// * 获取金额的小数点前、后的数据
			// * @param {Boolean} isFront : 是否是前半部分
			getPartMoney(prices, isFront) {
				const price = prices || ""
				if (!price) return EMPTY_PLACEHOLDER
				const list = price.split(".")
				const result = isFront ? list[0] : list[1]
				return result || 0
			},
			// 商家产品
			businessProducts() {
				businessProducts({
					method: 'GET',
					data: {
						pageNum: 1,
						pageSize: 10,
						shopId: this.shopId,
						productName: 'phone'
					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.businessGoodsList = res.data.products.records
					}
				})
			},
			onScrollToLower(e) {
				//翻页功能每次下拉需要页数加一
				this.pageNum = this.pageNum + 1
				// 商家商品数据
				businessProducts({
					method: 'GET',
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						shopId: this.shopId,
						productName: 'phone'
					}
				}).then(res => {
					if (res.statusCode === 200) {
						this.businessGoodsList = this.businessGoodsList.concat(res.data.products.records)
						this.total = res.data.products.total
					}
				})
			},
		}
	}
</script>

<style>
	.block{
		display: block;
	}
	/* page{
		display: none;
	} */
	.top-img{
		width: 100%;
		height: 360rpx;
		background: url('../../static/business/D1.png') center center/100% 100% no-repeat;
	}
	.white-img {
		margin-top: -120rpx;
	}

	.shopName {
		font-size: 33rpx;
		font-weight: 600;
		color: #000000;
	}

	.circle {
		background: rgba(15, 28, 63, 0.125);
		border-radius: 50%;
		object-fit: cover;
	}

	.haoPing,
	.order {
		font-size: 26rpx;
		color: #626262;
	}

	.com-tit {
		font-size: 33rpx;
		font-weight: 500;
		color: #292929;
	}

	.businessGoodsList-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.productZoneProductsList-Item {
		width: 23%;
		margin-left: 12rpx;
	}

	.businessGoodsList-Item {
		width: 49%;
	}

	.businessGoodsList-Img {
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.businessGoodsList-tit {
		background-color: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
	}

	.businessGoods-tit {
		line-height: 42rpx;
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		word-break: break-all;
	}

	.businessGoods-price {
		font-size: 29rpx;
		color: #E72B02;
	}

	.m {
		font-size: 20rpx;
		margin-right: 6rpx;
	}

	.l {
		font-size: 38rpx;
		font-weight: 500;
	}

	.d {
		font-size: 36rpx;
	}

	.r {
		font-size: 20rpx;
		font-weight: 500;
	}

	.businessGoods-tips {
		margin-top: 45rpx;
		font-size: 20rpx;
		color: #A1A1A1;
	}

	.home-bottom {
		text-align: center;
		margin: 20rpx 0;
	}
</style>
